<template>
  <div class="wrapper">
    <el-row class="container" :gutter="2">
      <el-col class="nav_left" :lg="4" :xs="4">
        <ul class="nav_ul">
          <li
            v-for="(list, index) in lists"
            :key="list.id"
            class="navbar"
            @mouseenter="showList(index)"
            @mouseleave="hideList(index)"
            @click="searchItem('','',list)"
            :class="{Active:list.active}"
          >
            <span class="listname">{{list.name}}</span>
            <span class="iconfont" style="margin-left:30px">&#xe788;</span>
          </li>
        </ul>
      </el-col>
      <el-col :lg="18" :xs="18" class="nav_swiper" v-show="!listShow">
        <home-swiper></home-swiper>
      </el-col>
      <el-col class="nav_right" :lg="17" :xs="17" v-show="listShow">
        <ul class="nav_right_ul">
          <transition-group name="slide-fade">
            <li
              v-for="(list, index) in lists"
              :key="list.id"
              @mouseenter="showList(index)"
              @mouseleave="hideList(index)"
              :class="{ActiveContent:list.active}"
              v-show="list.active"
              style="display: flex;
        flex-direction: column;
        justify-content: space-around;"
            >
              <div
                v-for="(childs,index)  in list.children"
                :key="childs.index"
                style="display:flex;align-items:center;height:30px;"
              >
                <div class="nav_right_title" @click="searchItem(childs)">{{childs.title}}</div>
                <div class="nav_right_content">
                  <span
                    v-for="grandChild in childs.children"
                    @click="searchItem(childs,grandChild)"
                    :key="grandChild.id"
                  >{{grandChild.name}}</span>
                </div>
              </div>
            </li>
          </transition-group>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import HomeSwiper from "./swiper";
import { getNavList } from "@/api/ajax";
export default {
  name: "Navbar",
  data() {
    return {
      listShow: false,
      lists: [
        {
          id: "1",
          name: "办公效率",
          active: false,
          children: [
            {
              title: "办公软件",
              children: [
                {
                  name: "PPT",
                  id: "11"
                },
                {
                  name: "EXCEL",
                  id: "12"
                },
                {
                  name: "WORD",
                  id: "13"
                },
                {
                  name: "Project",
                  id: "14"
                }
              ]
            },
            {
              title: "工作效率",
              children: [
                {
                  name: "思维导图",
                  id: "15"
                },
                {
                  name: "时间管理",
                  id: "16"
                },
                {
                  name: "Omini系列",
                  id: "17"
                }
              ]
            },
            {
              title: "电脑基础",
              children: [
                {
                  name: "基础操作",
                  id: "18"
                },
                {
                  name: "微课制作",
                  id: "19"
                },
                {
                  name: "常用工具",
                  id: "20"
                }
              ]
            },
            {
              title: "考试认证",
              children: [
                {
                  name: "计算机二级Office",
                  id: "21"
                },
                {
                  name: "微软MOS认证",
                  id: "22"
                }
              ]
            }
          ]
        },
        {
          id: "2",
          name: "职业发展",
          children: [
            {
              title: "求职应聘",
              children: [
                {
                  name: "职业规划",
                  id: "23"
                },
                {
                  name: "求职简历",
                  id: "24"
                },
                {
                  name: "面试技巧",
                  id: "25"
                }
              ]
            },
            {
              title: "个人提升",
              children: [
                {
                  name: "知识管理",
                  id: "23"
                },
                {
                  name: "习惯养成",
                  id: "24"
                },
                {
                  name: "演讲与口才",
                  id: "25"
                },
                {
                  name: "个人品牌",
                  id: "26"
                },
                {
                  name: "思维方式",
                  id: "27"
                }
              ]
            },
            {
              title: "求职应聘",
              children: [
                {
                  name: "职业规划",
                  id: "23"
                },
                {
                  name: "习惯养成",
                  id: "24"
                },
                {
                  name: "演讲与口才",
                  id: "25"
                },
                {
                  name: "个人品牌",
                  id: "26"
                },
                {
                  name: "思维方式",
                  id: "27"
                }
              ]
            }
          ],
          active: false
        },
        {
          id: "3",
          name: "编程开发",
          children: [
            {
              title: "办公软件",
              children: [
                {
                  name: "PPT",
                  id: "11"
                },
                {
                  name: "EXCEL",
                  id: "12"
                },
                {
                  name: "WORD",
                  id: "13"
                },
                {
                  name: "Project",
                  id: "14"
                }
              ]
            }
          ],
          active: false
        },
        {
          id: "4",
          name: "产品设计",
          children: [
            {
              title: "办公软件",
              children: [
                {
                  name: "PPT",
                  id: "11"
                },
                {
                  name: "EXCEL",
                  id: "12"
                },
                {
                  name: "WORD",
                  id: "13"
                },
                {
                  name: "Project",
                  id: "14"
                }
              ]
            }
          ],
          active: false
        },
        {
          id: "5",
          name: "生活方式",
          children: [
            {
              title: "办公软件",
              children: [
                {
                  name: "PPT",
                  id: "11"
                },
                {
                  name: "EXCEL",
                  id: "12"
                },
                {
                  name: "WORD",
                  id: "13"
                },
                {
                  name: "Project",
                  id: "14"
                }
              ]
            }
          ],
          active: false
        },
        {
          id: "6",
          name: "升学辅导",
          children: [
            {
              title: "办公软件",
              children: [
                {
                  name: "PPT",
                  id: "11"
                },
                {
                  name: "EXCEL",
                  id: "12"
                },
                {
                  name: "WORD",
                  id: "13"
                },
                {
                  name: "Project",
                  id: "14"
                }
              ]
            }
          ],
          active: false
        },
        {
          id: "7",
          name: "语言学习",
          children: [
            {
              title: "办公软件",
              children: [
                {
                  name: "PPT",
                  id: "11"
                },
                {
                  name: "EXCEL",
                  id: "12"
                },
                {
                  name: "WORD",
                  id: "13"
                },
                {
                  name: "Project",
                  id: "14"
                }
              ]
            }
          ],
          active: false
        }
      ]
    };
  },
  components: {
    HomeSwiper
  },
  mounted() {
    this.getNavList();
  },
  methods: {
    showList(index) {
      _(this.lists).forEach(function(v) {
        v.active = false;
      });
      this.lists[index].active = true;
      this.listShow = true;
    },
    hideList(index) {
      _(this.lists).forEach(function(v) {
        v.active = false;
      });
      this.listShow = false;
    },
    getNavList() {
      this.lists = [];
      getNavList().then(res => {
        if (res.data.code == 0) {
          let nav = res.data.data;
          _(nav).forEach((v, i, arr) => {
            if (v.grade == 1) {
              this.lists.push({
                id: v.id,
                name: v.value,
                active: false,
                code: v.code.toString(),
                children: []
              });
            }
          });
          for (let item of this.lists) {
            _(nav).forEach((v, i, arr) => {
              if (
                v.code.toString().substr(0, 1) == item.code.substr(0, 1) &&
                v.grade == 2
              ) {
                item.children.push({
                  title: v.value,
                  titlecode: v.code,
                  titleid: v.id,
                  grade: 2,
                  children: []
                });
              }
            });
          }
          for (let item of this.lists) {
            for (let childs of item.children) {
              _(nav).forEach((v, i, arr) => {
                if (
                  v.grade == 3 &&
                  (v.code.toString().substr(0, 1) ==
                    item.code.toString().substr(0, 1) &&
                    v.code.toString().substr(2, 1) ==
                      childs.titlecode.toString().substr(2, 1))
                ) {
                  childs.children.push({
                    code: v.code,
                    name: v.value,
                    id: v.id,
                    grade: 3
                  });
                }
              });
            }
          }
        }
       
        
      });
    },
    searchItem(child, grandchild,list) {
      console.log(list);
      
      if (grandchild) {
        this.$router.push({
          name: "SearchItem",
          query: { child: JSON.stringify(child), grandchild: JSON.stringify(grandchild) },params:{navdata:this.lists}
        });
      } else if(list){
         this.$router.push({
          name: "SearchItem",
          query: { child: JSON.stringify(list) },
          params:{navdata:this.lists}
        });
      }else{
        this.$router.push({
          name: "SearchItem",
          query: { child: JSON.stringify(child) },
          params:{navdata:this.lists}
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.wrapper {
  .container {
    position: relative;
    .listname{
      &:hover{
        color:orange;
        cursor: pointer;
      }
    }
    .nav_swiper {
      position: absolute;
      border: none;
      margin-left: 16.6%;
      margin-top: 1.1px;
      height: 420px;
    }
    .nav_ul {
      background: #303133;
      width: 100%;
      border-radius: 10px 0 0 10px;
      border: 1px solid #dcdfe6;
      .navbar {
        text-align: center;
        color: white;
        height: 60px;
        line-height: 60px;
      }
      .Active {
        background: white;
        color: #303133;
      }
    }
    .nav_right {
      height: 385px;

      .nav_right_ul {
        height: 100%;
        .ActiveContent {
          padding: 20px;
          height: 100%;
          background: rgba(242, 246, 252, 1);
        }
        .nav_right_title {
          // margin-top: 5px;
          border-right: 1px solid #606266;
          font-weight: bold;
          color: black;
          cursor: pointer;
          padding-right: 10px;
          &:hover {
            color: orange;
          }
        }
        .nav_right_content {
          // padding: 25px;
          & span {
            display: inline-block;
            cursor: pointer;
            margin: 0 10px;
            // width: 20%;
          }
          & span:hover {
            color: orange;
          }
        }
      }
    }
  }
}
</style>
